<template>
  <div v-if="!isEmptyList" class="more-opeator">
    <el-dropdown :trigger="trigger" :placement="showMobilePage ? 'bottom' : 'bottom-end'">
      <template v-if="$slots.button">
        <div :class="{'mobile-btn-icon': showMobilePage}">
          <slot name="button" />
        </div>
      </template>
      <template v-else>
        <el-button v-if="!showMobileIcon" class="more-button" size="small">{{ label }} <i v-if="icon" class="el-icon-caret-bottom"/></el-button>
        <div v-else class="mobile-icon">
          <el-image :src="mobileIcon" class="img"/>
          <span class="text">{{ mobileText || '更多' }}</span>
        </div>
      </template>
      <el-dropdown-menu slot="dropdown" :hide-on-click="false" style="padding:0;">
        <template v-for="(i, index) in list">
          <template v-if="i.auth === undefined || i.auth">
            <el-dropdown-item v-if="i.type ==='export'" :key="index+'export'" :divided="i.divided" class="white-space-nowrap">
              <ExportButton
                :ref="i.refName"
                :export-api="i.exportApi"
                :is-before-export="i.isBeforeExport || false"
                :export-name="i.exportName"
                :export-name-last="i.exportNameLast"
                :is-diy="true"
                :query-data="i.queryData || {}"
                :default-loading="false"
                :http-method="i.httpMethod || 'get'"
                @onComplate="exportonComplate($event,i)"
                @beforeExport="beforeExport(i)" >
                <el-tooltip v-if="i.tip" placement="left" effect="dark">
                  <div slot="content" style="max-width: 200px;">{{ i.tip }}</div>
                  <span style="font-size:14px;display:block;text-align:center;">
                    <i v-if="loading" class="el-icon-loading"/>{{ i.label }}
                  </span>
                </el-tooltip>
                <span v-else style="font-size:14px;display:block;text-align:center;">
                  <i v-if="loading" class="el-icon-loading"/>{{ i.label }}
                </span>
              </ExportButton>
            </el-dropdown-item>
            <el-dropdown-item v-else-if="i.type ==='import'" :key="index+'import'" class="white-space-nowrap">
              <ImportButton :import-api="i.importApi" :extend-params="i.extendParams" :get-list="i.callback" :type="i.uploadType" :accept="i.accept || null" is-diy @complateSetData="complateSetData($event, i)">
                <span style="font-size:14px;display:block;text-align:center;">{{ i.label }}</span>
              </ImportButton>
            </el-dropdown-item>
            <el-tooltip v-else-if="i.type === 'disabledTip'" :key="index" :open-delay="i.delay || 500" :content="i.tip" placement="left" effect="dark">
              <span>
                <el-dropdown-item
                  :disabled="i.disabled"
                  :divided="i.divided"
                  class="white-space-nowrap"
                  @click.native="i.handelClick ? (i.param || i.param ===0 ? i.handelClick(i.param, i.label) : i.handelClick()) : handelClick(i)">
                  <span style="font-size:14px;display:block;text-align:center;">{{ i.label }}<i v-if="i.loading" class="el-icon-loading"/></span>
                </el-dropdown-item>
              </span>
            </el-tooltip>
            <!-- 选项disable状态也需要展示tooltip内容 -->
            <div v-else-if="i.type === 'iconTip'" :key="`item_${index}`">
              <el-tooltip :open-delay="i.delay || 500" placement="left" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ i.tip }}</div>
                <div>
                  <el-dropdown-item
                    :disabled="i.disabled"
                    :divided="i.divided"
                    class="white-space-nowrap"
                    @click.native="i.handelClick ? (i.param || i.param ===0 ? i.handelClick(i.param, i.label) : i.handelClick()) : handelClick(i)">
                    <span style="font-size:14px;display:block;text-align:center;">
                      {{ i.label }}<el-image :src="tipIcon" class="option-tip-icon" />
                      <i v-if="i.loading" class="el-icon-loading"/>
                    </span>
                  </el-dropdown-item>
                </div>
              </el-tooltip>
            </div>
            <el-dropdown-item
              v-else
              :key="`item_${index}`"
              :disabled="i.disabled"
              :divided="i.divided"
              class="white-space-nowrap"
              @click.native="i.handelClick ? (i.param || i.param ===0 ? i.handelClick(i.param, i.label) : i.handelClick()) : handelClick(i)">
              <el-tooltip v-if="i.tip" :open-delay="i.delay || 500" placement="left" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ i.tip }}</div>
                <span style="font-size:14px;display:block;text-align:center;">{{ i.label }}<i v-if="i.loading" class="el-icon-loading"/></span>
              </el-tooltip>
              <span v-else style="font-size:14px;display:block;text-align:center;">
                {{ i.label }}
                <i v-if="i.loading" class="el-icon-loading"/>
              </span>
            </el-dropdown-item>
          </template>
        </template>
        <slot />
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import ExportButton from '@/components/ExportButton';
import ImportButton from '@/components/ImportButton';
import mobileIcon from '@/assets/mobileIcon/moreOperate.png';
import tipIcon from '@/assets/tishi.png';
import { showModal } from '@/utils/message';
import { mapState } from 'vuex';
export default {
  components: { ExportButton, ImportButton },
  props: {
    icon: {
      type: Boolean,
      default: true
    },
    label: {
      type: String,
      default: '更多操作'
    },
    mobileText: {
      type: String,
      default: '更多'
    },
    trigger: {
      type: String,
      default: 'click'
    },
    handelClick: {
      type: Function,
      default: () => {}
    },
    /**
     * label: 名称
     * handelClick: 点击事件
     * auth: 权限
     */
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    showMobileIcon: {// 列表移动端仅展示图标
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mobileIcon,
      tipIcon,
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    isEmptyList() {
      if (!this.list.length) return true;
      return !this.list.some(i => i.auth === undefined || i.auth);
    }
  },
  methods: {
    exportonComplate(data, i) {
      this.loading = false;
      if (i.exportonComplate) i.exportonComplate(data);
    },
    complateSetData(data, i) {
      if (i.complateSetData) i.complateSetData(data);
    },
    beforeExport(i) {
      if (i.beforeExport) i.beforeExport();
    },
    btnExport(params, refName, msg) {
      if (!this.loading && this.$refs[refName]) {
        showModal(msg || '是否确定导出数据？', '', {
          iconClass: 'del-icon'
        }).then(() => {
          this.loading = true;
          this.$emit('beginExport');
          this.$refs[refName][0].btnExport(params);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.more-button {
  width: 96px;
  padding: 0;
  height: 32px;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
  color: #666666;
  background: #fff;

}
.mobile-btn-icon {
  display: flex;
  align-items: center;
  ::v-deep {
    .el-image  {
      width: 24px !important;
      height: 24px !important;
    }
  }
}
.mobile-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 24px;
  .text {
    font-size: 10px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #aeb6c7;
    line-height: 14px;
    margin-top: 2px;
  }
  .img{
    width: 24px;
    height: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.option-tip-icon {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  transform: translateY(2px);
}
</style>
